4859
23795 
J'ai commencé un projet en utilisant Express et Handlebars, puis j'ai été encouragé à regarder Vue.js. Je suis encore au stade de la lecture de la documentation, mais jusqu'à présent, je ne comprends pas comment avoir des mises en page, des partiels et des sections dans Vue.js. Je pense qu'un partiel serait un composant, mais je ne sais pas comment avoir une mise en page avec des partiels et des sections dans lesquelles je peux injecter du contenu.
C'est ce que je fais en utilisant npm express-handlebars dans un fichier appelé baselayout.hbs:



{{> global / headcode}} 
{{{_sections.pagemeta}}} 




{{> global / siteheader}} 




{{{body}}} 






{{> sitefooter}}
{{{_sections.pagescripts}}} 


Comment pourrais-je configurer quelque chose comme ce qui précède dans Vue.js qui fonctionnerait également avec le rendu côté serveur? J'ai juste besoin d'une mise en page de base avec des composants d'en-tête / pied de page inclus, mais aussi des sections dans lesquelles le contenu spécifique à la page peut aller.
2021-03-04 08:13:18 
Pour SSR, vous devriez regarder Nuxt.js, Vapper ou l'un des autres frameworks SSR Vue.
Cela dit, oui, vous utiliseriez des composants pour tout. En règle générale, vous auriez un composant pour votre mise en page principale, puis un pour chaque vue, puis des composants individuels pour chaque partiel / section que vous importeriez ensuite dans vos vues et / ou votre mise en page principale. Ainsi, par exemple, sur la base du code ci-dessus:
La mise en page principale de votre application:
// AppLayout.vue










Exemple de composant 'partiel':
// BaseContainer.vue




 {{content.title}} 







Exemple de composant de vue:
// MyView.vue








Vous utiliseriez ensuite vue-router pour spécifier le composant de vue à charger en fonction de l'URL actuelle.
3
|
Vous devez probablement utiliser des composants et des emplacements dans vos composants.
Oui, vous devez créer un composant pour chacun de vos partiels. Chaque composant aurait un modèle.
Ensuite, vous aurez un composant principal qui réunira tout cela. En utilisant les composants plus granulaires que vous possédez déjà (vos partiels).
Maintenant, si la structure du modèle (html pour chaque composant) provient du serveur, vous pouvez utiliser les slots https://vuejs.org/v2/guide/components-slots.html, ce qui permet à VueJs de permettre aux composants de recevoir un balisage personnalisé lors de l'instanciation des composants (voir l'exemple dans la documentation)
Pour la mise en page générale et les composants de l'interface utilisateur de votre application, vous pouvez consulter https://element.eleme.io/#/en-US/component/layout, qui est une belle alternative au plus populaire Vuetify.
2
|
Ta Réponse
StackExchange.ifUsing ("éditeur", fonction () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("extraits", function () {
StackExchange.snippets.init ();
});
});
}, "extraits de code");
StackExchange.ready (fonction () {
var channelOptions = {
tags: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Doit lancer l'éditeur après les extraits, si les extraits sont activés
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("extraits", function () {
createEditor ();
});
}
autre {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: faux,
heartbeatType: 'réponse',
autoActivateHeartbeat: faux,
convertImagesToLinks: vrai,
noModals: vrai,
showLowRepImageUploadWarning: vrai,
reputationToPostImages: 10,
bindNavPrevention: vrai,
suffixe: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.72556.9762.6943 4.61182C47.4335 4.61182 46.7256 4.91628 46.094 4.69.4335 4.61182 46.7256 4.9762.6984 4.69.4335 4.61182 46.7256 4.9762.6943 4.6951.49.4335 4.61182 46.7256 4.9762.6943 4.69.48.4335 4.61182 46.725531.49.6943 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.492 12.6954.0 34184.01448.0 14.6954.0 34184.0 34184.0 14.6954.0 34184.0 34184.0 34184.0 34184.0 34184.0 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.4455.5C35.820 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "clip-rule = \" evenodd \ "d. = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.45024.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 .1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.5218 22.54379.69.6393 22.8472 14.5218 22.54379.64.2182172 14.5218 22.54379.64.69.62182 14.5218 22.54379.64.69.62172 14.5218 22.54.39.69.64.2182 14.52182189.65 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.27932Z \ "/ d16.95 M = 24.1317 9.27932Z \ u0016 \ u0016. .8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4,98375 13,3609 5.88013C12.653 5,05154 11,6581 4,62866 10,3573 4.62866C9.34336 4,62866 8,57809 4,89931 7,9466 5.5079C7.58314 4,9328 7,10506 4,66232 6,51203 5,00066 5,28821 4.66232C5.47873 4,66232 5,00066 6.59049V11.9512C5.00066 13,2535 5,47873 13,8962 6,51203 13.8962C7.54479 13,8962 8,0232 13,2535 8,0232 11.9512V8.90741C8.0232 7,58817 8,44431 6,91179 9,53458 6,91179 6.91179C10.5104 10,893 10,893 7,58817 8.94108V11.9512C10.893 13,2535 11,3711 13,8962 12,4044 13,9157 13,2535 13.8962C13.4375 13,8962 13,9157 11.9512V8.90741C13.9157 7,58817 14,3365 6,91179 15,4269 6.91179C16 .4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.3133558C 139049V 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3 .57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Contributions des utilisateurs sous licence \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (politique de contenu) \ u003c / a \ u003e",
allowUrls: vrai
},
onDemand: vrai,
discardSelector: ".discard-answer"
, immédiatementShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Merci d'avoir répondu à Stack Overflow!
Veuillez vous assurer de répondre à la question. Fournissez des détails et partagez vos recherches!
Mais évitez…
Demander de l'aide, des éclaircissements ou répondre à d'autres réponses.
Faire des déclarations basées sur des opinions; les sauvegarder avec des références ou une expérience personnelle.
Pour en savoir plus, consultez nos conseils sur la rédaction de bonnes réponses.
Brouillon enregistré
Brouillon rejeté
Inscrivez-vous ou connectez-vous
StackExchange.ready (fonction () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Inscrivez-vous avec Google
Inscrivez-vous via Facebook
Inscrivez-vous par e-mail et mot de passe
Nous faire parvenir
Publier en tant qu'invité
Nom
E-mail
Obligatoire, mais jamais affiché
StackExchange.ready (
fonction () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f59119547% 2fwhat-is-the-vue-js-equivalent-of-express-handlebars-sections% 23new-answer ',' question_page ');
}
);
Publier en tant qu'invité
Nom
E-mail
Obligatoire, mais jamais affiché
Publiez votre réponse
Jeter
En cliquant sur «Publier votre réponse», vous acceptez nos conditions d'utilisation, notre politique de confidentialité et notre politique en matière de cookies
Ce n'est pas la réponse que vous recherchez? Parcourez les autres questions marquées javascript node.js vue.js handlebars.js express-handlebars ou posez votre propre question.